<template>
	<Modal v-model="modal"  title="选择封面" width="1040" :mask-closable="false">
		<ImageCropper ref="imageCropper" :callback="getCropperImage" :fixedNumber="fixedNumber"></ImageCropper>
		<div slot="footer" style="width: 25%;margin: auto;text-align: center;">
			<Button @click="finish" type="primary" :loading="loading">完成</Button>
            <Button @click="cancel">取消</Button>
        </div>
	</Modal>
</template>
<script>
    
	import {Button,Modal} from 'iview';
    import ImageCropper from './image-cropper';

	export default{
		components:{
			Button,
           	Modal,
           	ImageCropper,
        },
        props :{
            callback:{
                type: Function,
                required : true,
            },
            fixedNumber:{
                type: Array,
                required : true,
            },
        },
        data () {
            return {
            	modal : false,
            	choiseImageUrl : '',
            	loading : false,
            }
        },
        methods:{
        	//获得剪切的图片,并上传
            getCropperImage(data){
                var param= {pic :data,fileArea:'wechat'};
                this.loading = true;
                this.Axios.Wechat.Manager.Material.Image.Upload(param)
                .then(res =>{
                    if(!res) return false;
                    this.loading = false;
                    this.modal = false;
                    this.callback(res.data.url,this.choiseImageUrl);
                })
            },
            cancel(){
            	this.modal = false;
            },
            finish(){
            	this.$refs.imageCropper.getCropper();
            }
        },
        watch :{
        	modal:function(bool){
        		if(bool){
        			this.$refs.imageCropper.show = true;
                	this.$refs.imageCropper.cropper.img = this.choiseImageUrl;
        		}
        	}
        }
	}
</script>